<script>
</script>

<template>
	<!--shortcut-nav部分start-->
	<div class="shortcut-nav">
		<div class="w">
			<div class="shortcut-nav-menu">
				<div class="shortcut-nav-menu-all">
					<a href="#">全部商品分类</a>
				</div>

				<!--具体的商品分类start-->
				<div class="shortcut-nav-menu-one" style="color: #fff">
					<ul>
						<li>
							<a href="">家用电器</a>
							<i>></i>
						</li>
						<li>
							<a href="">手机</a>
							<span>、</span>
							<a href="">数码</a>
							<i>></i>
						</li>
						<li>
							<a href="">电脑</a>
							<span>、</span>
							<a href="">办公</a>
							<i>></i>

						</li>
						<li>
							<a href="">家居</a>
							<span>、</span>
							<a href="">家具</a>
							<i>></i>
						</li>
						<li>
							<a href="">男装</a>
							<span>、</span>
							<a href="">女装</a>
							<i>></i>
						</li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
				<!--具体的商品分类end-->
			</div>
			<div class="shortcut-nav-items">
				<ul>
					<li><a href="#">服装城</a></li>
					<li><a href="#">美妆馆</a></li>
					<li><a href="#">京东超市</a></li>
					<li><a href="#">生鲜</a></li>
					<li><a href="#">全球购</a></li>
					<li><a href="#">闪购</a></li>
					<li><a href="#">团购</a></li>
					<li><a href="#">拍卖</a></li>
					<li><a href="#">金融</a></li>
				</ul>
			</div>
			<div class="shortcut-nav-img">
				<a href="#">
					<img src="../../assets/jd/img2.jpg" />
				</a>
			</div>
		</div>
	</div>
	<!--shortcut-nav部分end-->


	<!--网页两侧的广告start-->

	<div class="banner-ad">
		<a href="http://www.baidu.com"></a>
	</div>

	<!--网页两侧的广告end-->






	<!--main部分start-->
	<div class="main">
		<div class="w clearfix">
			<div class="main-slider">
				<a href="">
					<img src="../../assets/jd/slider.jpg" alt="">
				</a>

				<ul> <!--指示点-->
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
				</ul>
				<a href="javascript:;" class="arrow-left">&lt;</a> <!--左边的箭头-->
				<a href="javascript:;" class="arrow-right">&gt;</a> <!--右边的箭头-->


			</div>

			<div class="main-news">
				<div class="main-news-top"> <!--京东快报+充话费-->
					<div class="main-news-top-faster"> <!--京东快报-->
						<div class="main-news-top-faster-title">
							<h2>京东快报</h2>
							<a href="#">更多 ></a>
						</div>
						<div class="main-news-top-faster-content">
							<ul>
								<li><span>[特惠]</span>新闻1</li>
								<li><span>[公告]</span>新闻2</li>
								<li><span>[特惠]</span>新闻3</li>
								<li><span>[公告]</span>新闻4</li>
								<li><span>[特惠]</span>新闻5</li>
							</ul>

						</div>
					</div>
					<div class="main-news-top-money"> <!--充话费-->
						<ul>
							<li>
								<a href="">
									<i></i> <!--单元格里的图片-->
									<span>话费</span>
								</a>
							</li>
							<li>
								<a href="">
									<i class="main-news-top-money-icon2"></i> <!--单元格里的图片-->
									<span>机票</span>
								</a>

							</li>
							<li>
								<a href="">
									<i></i> <!--单元格里的图片-->
									<span>话费</span>
								</a>
							</li>
							<li>
								<a href="">
									<i></i> <!--单元格里的图片-->
									<span>话费</span>
								</a>
							</li>
							<li>
								<a href="">
									<i></i> <!--单元格里的图片-->
									<span>话费</span>
								</a>
							</li>
							<li>
								<a href="">
									<i></i> <!--单元格里的图片-->
									<span>话费</span>
								</a>
							</li>
							<li>
								<a href="">
									<i></i> <!--单元格里的图片-->
									<span>话费</span>
								</a>
							</li>
							<li>
								<a href="">
									<i></i> <!--单元格里的图片-->
									<span>话费</span>
								</a>
							</li>
							<li>
								<a href="">
									<i></i> <!--单元格里的图片-->
									<span>话费</span>
								</a>
							</li>
							<li>
								<a href="">
									<i></i> <!--单元格里的图片-->
									<span>话费</span>
								</a>
							</li>
							<li>
								<a href="">
									<i></i> <!--单元格里的图片-->
									<span>话费</span>
								</a>
							</li>
							<li>
								<a href="">
									<i></i> <!--单元格里的图片-->
									<span>话费</span>
								</a>
							</li>
						</ul>
					</div>

				</div>
				<div class="main-news-bottom">
					<a href="">
						<img src="../../assets/jd/img3.png" alt="">
					</a>
				</div>
			</div>
		</div>
	</div>
	<!--main部分end-->


	<!--今日推荐start-->
	<div class="today">
		<div class="w clearfix">
			<div class="today-left fl">
				<a href=""></a>
			</div>

			<div class="today-right">
				<ul>
					<li><a href=""><img src="../../assets/jd/today1.jpg" alt=""></a></li>
					<li><a href=""><img src="../../assets/jd/today2.jpg" alt=""></a></li>
					<li><a href=""><img src="../../assets/jd/today3.jpg" alt=""></a></li>
					<li><a href=""><img src="../../assets/jd/today4.jpg" alt=""></a></li>
				</ul>
				<a href="javascript:;" class="arrow-left">&lt;</a> <!--左边的箭头-->
				<a href="javascript:;" class="arrow-right">&gt;</a> <!--右边的箭头-->

			</div>

		</div>
	</div>
	<!--今日推荐end-->
</template>

<style scoped>
	/*shortcut-nav部分start*/
	.shortcut-nav {
		height: 44px;
		border-bottom: 2px solid #B1191A;
	}

	.shortcut-nav-menu {
		/*撑开和撑破是两回事：撑开说明盒子变成那么大，撑破盒子还是那么大，子盒子很大。子盒子shortcut-nav-menu-one把父亲撑破了*/
		width: 210px;
		height: 44px;
		/*浮动的盒子相互影响，不过是否在同一个盒子中*/
		float: left;
		position: relative;
		z-index: 1;
		/*通过z-index属性将层级放到最高*/
	}

	.shortcut-nav-menu-all a {
		display: block;
		width: 190px;
		height: 44px;
		color: white;
		padding: 0 10px;
		background-color: #B1191A;
		font: 400 15px/44px "microsoft yahei";
	}

	.shortcut-nav-menu-one {
		height: 465px;
		margin-top: 2px;
		background-color: #C81623;
		border-left: 1px solid #B1191A;
		/*设置一个像素的边框*/
		border-bottom: 1px solid #B1191A;
		/*border-left: 1px solid #000;*/
		/*border-bottom: 1px solid #000;*/
	}

	.shortcut-nav-items {
		width: 730px;
		height: 44px;
		float: left;
	}

	.shortcut-nav-items li {
		float: left;
	}

	.shortcut-nav-items a {
		display: inline-block;
		height: 44px;
		padding: 0 20px;
		color: #333;
		font: 400 16px/44px "microsoft yahei";
	}

	.shortcut-nav-items a:hover {
		color: #C81623;
	}

	.shortcut-nav-img {
		height: 44px;
		float: right;
		margin-top: -10px;
		margin-right: 50px;
		/*position: relative;*/
		/*left: -50px;*/
		/*top: -10px;*/
	}

	/*shortcut-nav部分end*/


	/*具体的商品分类start*/
	.shortcut-nav-menu-one ul {
		font: 400 14px/31px "microsoft yahei";
		/*字体属性具有继承性，让儿子 a 具有此继承性*/
	}

	.shortcut-nav-menu-one li {
		padding-left: 10px;
		position: relative;
	}

	.shortcut-nav-menu-one a {
		color: #fff;
	}

	.shortcut-nav-menu-one i {
		right: 10px;
		position: absolute;
	}

	.shortcut-nav-menu-one li:hover {
		background-color: #fff;
	}

	.shortcut-nav-menu-one li:hover a,
	span,
	i {
		color: #C81623;
	}

	/*具体的商品分类end*/


	/*==============*/


	/*banner两侧的广告start*/
	.banner-ad {
		position: relative;
	}

	.banner-ad a {
		width: 100%;
		height: 644px;
		background: url("../../assets/jd/ad.png") no-repeat center top;
		position: absolute;
	}

	/*banner两侧的广告end*/





	/*轮播图start*/
	.main-slider {
		float: left;
		margin: 12px 0 0 220px;
		width: 730px;
		height: 454px;
		position: relative;
	}

	.main-slider ul {
		position: absolute;
		bottom: 10px;
		left: 50%;
		margin-left: -66px;
	}

	.main-slider ul li {
		float: left;
		width: 18px;
		height: 18px;
		color: #fff;
		background-color: #3E3E3E;
		border-radius: 50%;
		/*圆角矩形*/
		line-height: 18px;
		text-align: center;
		/*让 li 里面的文本水平方向居中*/
		margin: 0 2px;
		cursor: pointer;
		/*鼠标悬停时变成小手*/
	}

	.arrow-left {
		/* 轮播图左侧的箭头*/
		position: absolute;
		top: 50%;
		margin-top: -31px;
		left: 0px;
		width: 28px;
		height: 62px;
		background-color: rgba(0, 0, 0, 0.3);
		color: #fff;
		font: 400 22px/62px "sumsun";
		text-align: center;
		border-radius: 10px 0 0 10px;
	}

	.arrow-left:hover {
		background-color: rgba(0, 0, 0, 0.7);
	}

	.arrow-right {
		/*轮播图右侧的箭头*/
		position: absolute;
		top: 50%;
		margin-top: -31px;
		right: 0px;
		width: 28px;
		height: 62px;
		background-color: rgba(0, 0, 0, 0.3);
		color: #fff;
		font: 400 22px/62px "sumsun";
		text-align: center;
		border-radius: 10px 0 0 10px;
	}

	.main-slider .arrow-right:hover {
		background-color: rgba(0, 0, 0, 0.7);
	}

	/*轮播图end*/


	.main-news {
		float: right;
		height: 466px;
		width: 250px;
	}

	.main-news-top {
		height: 372px;
		width: 248px;
		margin: 12px 0 5px 0;
		border: 1px solid #E4E4E4;
	}

	/*京东快报中的新闻start*/
	.main-news-top-faster {
		height: 163px;
		border-bottom: 1px dashed #E4E4E4;
		/*虚线*/
		position: relative;
	}

	.main-news-top-faster-title {
		height: 32px;
		line-height: 32px;
		border-bottom: 1px dotted #E8E8E8;
		/*点线*/
		padding: 0 15px;

	}

	.main-news-top-faster-title h2 {
		float: left;
		font: 400 16px/32px "microsoft yahei";
	}

	.main-news-top-faster-title a {
		float: right;
	}

	.main-news-top-faster-content {
		padding: 5px 0 0 15px;

	}

	.main-news-top-faster-content li {
		line-height: 24px;
	}

	.main-news-top-faster-content span {
		font-weight: 700;
		margin-right: 5px;
		color: #666;
	}

	/*京东快报中的新闻end*/


	/*充话费部分start*/
	.main-news-top-money {
		overflow: hidden;
		/*将多余的部分切掉*/
	}

	.main-news-top-money ul {
		width: 260px;
		/*让宽度略大于整体的宽度250px*/
	}

	.main-news-top-money li {
		width: 62px;
		height: 70px;
		border: 1px solid #E8E8E8;
		float: left;
		border-top: 0;
		/* 将每个单元格的上边框去掉，因为跟单元格的下边框重合了。*/
		margin-top: -1px;
		/* 整体向上移动一个单位，因为边框重合了*/
		margin-left: -1px;
		/* 整体向左移动一个单位，因为边框重合了*/
	}

	.main-news-top-money li a {
		display: block;
		width: 62px;
		height: 30px;
		padding-top: 40px;
		text-align: center;
		line-height: 30px;
		position: relative;
	}

	.main-news-top-money li a i {
		width: 25px;
		height: 25px;
		position: absolute;
		top: 13px;
		left: 18px;
		background: url("../../assets/jd/fly.png") right top;
	}

	.main-news-top-money .main-news-top-money-icon2 {
		background: url("../../assets/jd/fly.png") right -25px;
	}

	/*充话费部分end*/


	/*今日推荐start*/
	.today {
		padding: 10px 0 20px;
	}

	.today-left a {
		display: block;
		width: 210px;
		height: 150px;
		background: url("../../assets/jd/today.jpg");
		position: relative;
	}

	.today-right {
		float: right;
		width: 1000px;
		overflow: hidden;
		/*隐藏掉右侧超出的几个像素*/
		position: relative;
	}

	.today-right ul {
		width: 410%;
		/*这一点很有技巧*/
	}

	.today-right li {
		float: left;
		margin-right: 1px;

	}

	/*今日推荐end*/
</style>